import styles from './index.less';
import { Avatar, Button, Tabs } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useMemo, useState } from 'react';
import Favorite from './compoents/Favorite';
import Article from './compoents/Article';
import Follow from './compoents/Follow';
import EditUserInfo from './compoents/EditUserInfo';
import { useRequest } from 'ahooks';
import {  getUserDetailByUserId } from '@/services/article';
import { useModel, useParams } from '@umijs/max';
import { isMeById } from '@/utils/info';
import FollowButton from '@/components/FollowButton';

export default () => {
    const items = [
        {
            key: 'article',
            label: '文章',
            component:<Article/>
        },
        {
            key: 'favorite',
            label: '收藏夹',
            component:<Favorite/>
        },
        {
            key: 'follow',
            label: '粉丝',
            component:<Follow/>
        }
    ]
    const {id}= useParams();
    const {userInfo={}} = useModel('global');
    const [open,setOpen]= useState(false);
    const [tabNow,setTabNow] = useState(items[0])
    const {data:userDetail,run} = useRequest(getUserDetailByUserId,{
        defaultParams:[id]
    })
    return (<div className={styles.box}>
                <div className={styles.container}>
                    <div className={
                        styles.top
                    }>
                        <Avatar size={90} icon={<UserOutlined />} src={isMeById(id)?userInfo.avatar:userDetail?.avatar} />
                        <div className={styles.rightInfo}>
                            <span className={styles.username}>{isMeById(id)? userInfo.nickname: userDetail?.nickname}</span>
                            <div className={styles.extraInfo}>
                                <div className={styles.desc}>
                                <span className={styles.descItem}><span>{userDetail?.articleCount||0}</span><span>文章</span></span>
                                <span className={styles.descItem}><span>{userDetail?.readCount||0}</span><span>阅读</span></span>
                                <span className={styles.descItem}><span>{userDetail?.followCount||0}</span><span>粉丝</span></span>
                                </div>
                                <div>
                                    <FollowButton onChange={(flag)=>{
                                        run(id)
                                    }} userId={id} isFollow={userDetail?.isFollow} isMeRender={<Button type='primary' onClick={()=>{setOpen(true)}}>设置</Button>} />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.bottom}>
                         <Tabs className={styles.tabs} items={isMeById(id)?items:items.filter(i=>i.key!=='follow')} activeKey={tabNow.key} onChange={(key)=>{
                             setTabNow(items?.find?.(i=>i.key===key))
                             }}></Tabs>
                         <div className={styles.list}>
                            {
                                tabNow?.component
                            }
                         </div>
                    </div>
                </div>
                <EditUserInfo open={open} onClose={()=>{setOpen(false)}} />
    </div>)
}